<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script>
	$(document).ready(function() {
		var projectId = '${project.id}';
		$("input[name='userId']").select2({
			placeholder: '请选择学员',
			minimumResultsForSearch: 1,
			minimumInputLength: 2,
			tags: true,
			allowClear: true,
			ajax: {
				type: 'GET',
				url: function(params) {
					return window.__CTX__.root + '/trainees/select-search?query=' + params + '&currentProjectId=' + projectId
				},
				dataType: 'json',
				delay: 1500,
				results: function(response, page, i) {

					if(response.code == '0' || response.code == 0) {
						return {
							results: response.data.trainees
						}
					} else {
						return null;
					}
				},
				cache: true
			}
		}).on("change", function(e) {
			if(e.added) {
				// 把id text拿出来，放到下面的框
				var id = e.added.id;
				var text = e.added.text;
				var html = '<label style="border: 1px solid #716969; display: inline-block; padding: 2px 4px; margin: 5px;cursor:pointer;border-radius:10px;"  class="label label-success select-trainee">' + text +
					'&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 14px;" class="glyphicon glyphicon-remove"></span>'+
				'<input type="hidden" name="selectTraineeIds" value="' + id + '" />' +
					'</label>';
				$("#selectData").append(html)
				// 清空input的值
				$("input[name='userId']").select2("val", "");
			}
		})

		$(document).on("click", ".select-trainee", function() {
			$(this).remove();
		})
	})
</script>
<div class="modal-dialog ms-modal-dialog" style="margin-top: 50px;">
	<div class="modal-content" style="width: 700px;height: 400px;">

		<div class="modal-header">
			<button type="button" id="closeBtn" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
			<h4 class="modal-title">添加必修学员</h4>
		</div>
		<form class="form-horizontal ms-form form-personal-info" method="POST" action="${ctx.host}/project-data/${project.id}/trainee-add" data-validate="true">

			<input type="hidden" name="_method" value="POST" />

			<input type="hidden" name="projectId" value="${project.id}" />

			<div class="modal-body" style="float: none;">

				<div class="form-group  umu-form-group">
					<label class="control-label col-xs-3">查询学员：</label>
					<div class="col-xs-8">
						<input type="text" class="select2 form-control" id="traineeSearchName" name="userId" value="" placeholder="请输入姓名/邮箱进行查询" autocomplete="off" tabindex="1" />
					</div>
				</div>

				<div class="form-group  umu-form-group">
					<label class="control-label col-xs-3">已选择学员：</label>
					<div class="col-xs-8">
						<div style="min-height: 150px; border: 1px solid #716969; padding: 5px 0;overflow: hidden;width:433px;word-wrap: break-word;word-break: break-all;height: 180px;overflow-y: auto;" id="selectData"></div>
					</div>
				</div>

			</div>

			<div class="modal-footer">
				<button type="submit" id="btnSubmit" class="btn btn-shadow-success btn-shadow umu-btn">提交</button>
				<button type="button" id="btnCancel" class="btn btn-shadow-default btn-shadow umu-btn" data-dismiss="modal">取消</button>
			</div>
		</form>

	</div>
</div>